<template>
  <section>
    <ul>
      <li v-for="item in listData" :key="item.t_content_pk" class="list-item">
        <h3>
          <router-link :to="getRowUrl($route.params,item)">{{ item.title }}</router-link>
        </h3>
        <h4>{{ item.subtitle }}</h4>
        <div class="list-bottom">
          <span>{{item.publish_time}}</span>
          <router-link :to="getRowUrl($route.params,item)">阅读全文</router-link>
        </div>
      </li>
    </ul>
    <list-pagination
      @page="handlePage"
      :page="page"
      :totalPage="totalPage"
    ></list-pagination>
  </section>
</template>

<script>
import ListPagination from "./list-pagination.vue";
import ajax from "@/util/request";

export default {
  components: { ListPagination },
  props: {
    params: {
      type: Object,
    },
  },
  data() {
    return {
      listData: [],
      page: 1,
      totalPage: 1,
    };
  },
  methods: {
    handlePage(page) {
      this.queryList(this.params, page);
    },
    queryList(params, page) {
      this.page = page;
      ajax("/content/queryList", {
        t_cat_plant_fk: params.t_cat_plant_pk,
        rows: 20,
        page,
      }).then(({ data }) => {
        if (data.status > 0) {
          this.listData = data.result_data;
          this.totalPage = data.totalPage;
        }
      });
    },
  },
  watch: {
    params: {
      immediate: true,
      handler(newVal) {
        this.queryList(newVal, 1);
      },
    },
  },
};
</script>

<style scoped>
  
  .list-item {
    line-height: 30px;
    padding: 15px 5px;
    border-bottom: 1px solid var(--less-color);
  }
  .list-item>h3>a {
    color: #000;
    line-height: 40px;
    height: 40px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.5s;
  }

  .list-item>h3::after {
    content: "";
    display: block;
    width: 0%;
    transition: all 0.5s;
    border-bottom: 2px solid var(--base-color);
  }

  .list-item>h3:hover::after {
    width: 100%;
  }

  .list-item>h3:hover>a {
    color: var(--base-color)
  }

  .list-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    font-size: 90%;
    color: var(--less-color)
  }
  
  .list-bottom>a {
    color: #000;
  }

  .list-bottom>a:hover {
    color: var(--base-color)
  }
</style>